<template>
<div>
  <h1>问题列表-匿名的</h1>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="问题">
        <el-input v-model="search.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.type" placeholder="请选择类型">
          <el-option label="技术点" value="技术点" />
          <el-option label="项目" value="项目" />
          <el-option label="生活" value="生活" />
          <el-option label="感情" value="感情" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="questions">
      <el-table-column fixed prop="id" label="序号" width="100" />
      <el-table-column prop="title" label="问题" width="220" />
      <el-table-column prop="type" label="类型" width="120" />
      <el-table-column prop="info" label="问题描述" width="200" />
      <el-table-column prop="answer" label="参考答案" width="300" />
      <el-table-column prop="ctime" label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="update(scope.row)">修改</el-button>
          <el-button link type="danger" size="small" @click="del(scope.row.id,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="float: right;margin-right: 30px;margin-top: 20px">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
import {useStore} from 'vuex'
const questions = ref([])
const store = useStore()
const router=useRouter()
const total=ref(10)
const search=ref({
  type:"",
  title:"",
  page:1,
  size:10
})
const loadData=()=>{
  //请求接口 axios get 键值对
  axios.get("question/page?type="+search.value.type+"&title="+search.value.title+"&page="+search.value.page+"&size="+search.value.size).then(res=>{
    if(res.data.code==0){
      questions.value=res.data.data.list;
      total.value=res.data.data.size;
    }
  })
}
onMounted(()=>{
  loadData()
})
const del=(id,index)=>{
  var msg = "您真的确定要删除吗？\n\n请确认！";
  if (confirm(msg)==true){
    //请求接口 删除数据
    axios.post("question/del",{id:id}).then(res=>{
      if(res.data.code==0){
        questions.value.splice(index, 1)
      }
    })
  }
}
const update = (obj) => {
  //修改 获取当前行对象 VueX 跳转到页面
  console.log(obj);
  //存储到VueX
  store.commit("setQ",obj);
  //实现页面跳转
  router.push("/update")
}
</script>

<style scoped>

</style>
